<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view/>
    </div>
  </a-config-provider>
</template>
<script>
  import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
  import enquireScreen from '@/utils/device'
  import {mapGetters} from 'vuex'

  export default {
    data () {
      return {
        locale: zh_CN,
      }
    },
    created () {
      let that = this
      that.setLanguage(this.$i18n.locale || this.lang)
      enquireScreen(deviceType => {
        // tablet
        if (deviceType === 0) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        // mobile
        else if (deviceType === 1) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        else {
          that.$store.commit('TOGGLE_DEVICE', 'desktop')
          that.$store.dispatch('setSidebar', true)
        }

      })
    },
    watch: {
      lang(val) {
        this.setLanguage(val)
      }
    },
    computed: {
    ...mapGetters(['lang'])
    },
    methods: {
      setLanguage(lang) {
        this.$i18n.locale = lang
        
        switch (lang) {
          case 'CN':
            this.locale = require('ant-design-vue/lib/locale-provider/zh_CN').default
            break
          case 'HK':
            this.locale = require('ant-design-vue/lib/locale-provider/zh_TW').default
            break
          case 'US':
          default:
            this.locale = require('ant-design-vue/lib/locale-provider/en_US').default
            break
        }
      }
    }
  }
</script>
<style>
  #app {
    height: 100%;
  }
</style>